<template>
  <el-container class="main">

    <!--头部区域-->
    <el-header>
      <div>
        <div class="an1" ref="animationContainer2"></div>
<!--        <img :src="imageLogo" style="width: 40px;height: 40px;margin-left: 20px">-->
        <router-link to="/desktop" class="logo-title">&nbsp;&nbsp;云音乐播放平台后台管理系统</router-link>
      </div>
      <el-dropdown>
        <span class="el-dropdown-link">
          {{ username }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="loginOut">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>

    <!--页面主体区域-->
    <el-container>

      <!--侧边栏-->
      <el-aside style="width: 200px">
        <el-menu text-color="#008390" active-text-color="#ade2e0" class="el-menu-vertical-demo ">
          <div class="da">
            <el-submenu index="1">

              <template slot="title">
                <i class="el-icon-user" style="color: #008390"></i>
                <span slot="title">管理员管理</span>
              </template>

              <router-link class="router-link-active" to="/faceList">
                <el-menu-item index="1-1">
                  管理员列表
                </el-menu-item>
              </router-link>
              <router-link class="router-link-active" to="/faceLog">
                <el-menu-item index="1-2">
                  管理员日志
                </el-menu-item>
              </router-link>

            </el-submenu>
            <el-submenu index="2">

              <template slot="title">
                <i class="el-icon-s-custom" style="color: #008390"></i>
                <span slot="title">用户管理</span>
              </template>

              <router-link class="router-link-active" to="/userList">
                <el-menu-item index="2-1">
                  用户列表
                </el-menu-item>
              </router-link>

            </el-submenu>
            <el-submenu index="3">

              <template slot="title">
                <i class="el-icon-user-solid" style="color: #008390"></i>
                <span slot="title">歌手管理</span>
              </template>

              <router-link class="router-link-active" to="/singer">
                <el-menu-item index="3-1">
                  歌手列表
                </el-menu-item>
              </router-link>

            </el-submenu>
            <el-submenu index="4">

              <template slot="title">
                <i class="el-icon-document" style="color: #008390"></i>
                <span slot="title">歌单管理</span>
              </template>

              <router-link class="router-link-active" to="/songList">
                <el-menu-item index="4-1">
                  用户歌单列表
                </el-menu-item>
              </router-link>

              <router-link class="router-link-active" to="/songCollection">
                <el-menu-item index="4-2">
                  歌手专辑列表
                </el-menu-item>
              </router-link>

            </el-submenu>
            <el-submenu index="5">

              <template slot="title">
                <i class="el-icon-headset" style="color: #008390"></i>
                <span slot="title">歌曲管理</span>
              </template>

              <router-link class="router-link-active" to="/song">
                <el-menu-item index="5-1">
                  歌曲列表
                </el-menu-item>
              </router-link>

            </el-submenu>
            <div class="donghua" ref="animationContainer"></div>
          </div>
        </el-menu>

      </el-aside>


      <!--右侧内容主体-->
      <el-main>
        <router-view></router-view>
      </el-main>

    </el-container>
  </el-container>
</template>

<script>
import lottie from 'lottie-web';
import animationData from '@/assets/dlf10_DXljHQsLLA.json';
import animationData2 from '@/assets/lf30_euhwwdrs.json'

export default {
  name: "home",
  mounted() {
    //第一个
    const container = this.$refs.animationContainer;
    const options = {
      animationData: animationData,
      loop: true,
      autoplay: true
    };
    this.animation = lottie.loadAnimation({
      container: container,
      renderer: 'svg',
      ...options
    });
    //第二个
    const container2 = this.$refs.animationContainer2;
    const options2 = {
      animationData: animationData2,
      loop: true,
      autoplay: true
    };
    this.animation2 = lottie.loadAnimation({
      container: container2,
      renderer: 'svg',
      ...options2
    });
  },
  data() {
    return {
      username: 'admin',
      imageLogo: require('@/assets/mLpJE72KqY.png')
    }
  },
  created() {
    this.username = localStorage.getItem("username");
  },
  methods: {
    //退出登录
    loginOut() {
      localStorage.clear()
      this.$router.push("/")
    },
  }
}
</script>

<style>
@import "./index.css";

.donghua {
  position: fixed;
  left: -44%;
  bottom: 10px;
  width: 100%;
  height: 200px;
}
.an1{
  height: 60px;
  margin-left: 20px;
}
</style>